<template>
  <!-- @click.native="$router.push('/user/profile')" -->
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard title="我的主页">
            <div class="tabOne">
              <div
                class="tablist"
                @click="homePageState = 1"
                :class="homePageState == 1 ? 'isActive' : ''"
              >
                <img src="~@/assets/images/yg_icon_nor.png" class="imgnor" />
                <img src="~@/assets/images/yg_icon_sel.png" class="imgsel" />
                <el-button round>我的已购</el-button>
              </div>
              <div
                class="tablist"
                @click="clickCollect"
                :class="homePageState == 2 ? 'isActive' : ''"
              >
                <img src="~@/assets/images/sc_icon_nor.png" class="imgnor" />
                <img src="~@/assets/images/sc_icon_sel.png" class="imgsel" />
                <el-button round>我的收藏</el-button>
              </div>
              <!-- 只有是专家 渠道 商务 商务和渠道才可能有资金账户 -->
              <div
                class="tablist"
                @click="homePageState = 3"
                :class="homePageState == 3 ? 'isActive' : ''">
                <img src="~@/assets/images/zjzh_icon_nor.png" class="imgnor" />
                <img src="~@/assets/images/zjzh_icon_sel.png" class="imgsel" />
                <el-button round>资金账户</el-button>
              </div>

              <!-- <div
                class="tablist"
                @click="homePageState = 3"
                :class="homePageState == 3 ? 'isActive' : ''"
              >
                <img src="~@/assets/images/zjzh_icon_nor.png" class="imgnor" />
                <img src="~@/assets/images/zjzh_icon_sel.png" class="imgsel" />
                <el-button round>资金账户</el-button>
              </div> -->
            </div>
            <!-- 1我的已购 -->
            <div class="orderList" v-if="homePageState == 1">
              <ul v-if="buyList.length">
                <li
                  v-for="list in buyList"
                  :key="list.id"
                  :class="buyDetail.id == list.id ? 'isActive' : ''"
                  @click="clickDetailBought(list)"
                >
                  <h2>
                    <p>{{ list.title }}</p>
                  </h2>
                  <!-- <i class="firstWord">{{ getHanzi(list.title) }}</i> -->
                  <p class="coll_source">
                    <span>{{ getType(list.type) }}</span>
                    {{ list.createdTime }} · {{ list.answers
                    }}<template v-if="list.answers">回答</template>
                  </p>
                </li>
              </ul>
              <!-- 暂无数据 -->
              <p class="forData" v-else>暂无已购</p>
            </div>

            <!-- 2我的收藏 -->
            <div class="orderList" v-else-if="homePageState == 2">
              <ul v-if="collectList.length">
                <li
                  v-for="item in collectList"
                  :key="item.id"
                  :class="collectDetail.id == item.esId ? 'isActive' : ''"
                  @click="clickDetailPage(item)"
                >
                  <h2>
                    <p>{{ item.esName }}</p>
                  </h2>
                  <!-- <i class="firstWord" v-if="item.esName">{{getHanzi(item.esName)}}</i> -->
                  <p class="coll_source">
                    <span>{{ getType(item.esType) }}</span
                    >{{ item.favoriteTime.substring(10, 0) }}
                    <!-- {{ item.answer }}<template v-if="item.answer">回答</template> -->
                    <button @click="removeCollect(item)">取消收藏</button>
                  </p>
                </li>
              </ul>
              <!-- 暂无数据 -->
              <p class="forData" v-else>暂无收藏</p>
            </div>

            <!-- 3资金账户 -->
            <div class="account" v-else>
              <div class="accountList">
                <p class="accTitle">可提现金额（元）</p>
                <div class="cashAmount">
                  <!-- 自定义过滤器 格式化金额(保留两位小数并用逗号分隔) -->
                  <p>{{ amount | sumFilters }} <span v-if="auditBalance">({{auditBalance | sumFilters}}在审核中)</span></p>
                  <div class="cashBtn">
                    <el-button
                      round
                      :class="recordState ? 'cashIsFocus' : ''"
                      @click="isDetail"
                      >查看明细</el-button
                    >
                    <el-button
                      round
                      :class="recordState ? '' : 'cashIsFocus'"
                      @click="isWithdraw"
                      v-if="getRoleZj()"
                      >账户提现</el-button>
                  </div>
                </div>
              </div>
              <div class="accountList" style="margin-bottom: 0px">
                <p class="accTitle">我的卡包</p>
                <ul class="bankCard">
                  <li
                    v-for="cardItem in cardList"
                    @click="clickBankCard(cardItem, $event)"
                    :key="cardItem.id"
                  >
                    <p>
                      <svg-icon icon-class="yhk_img" v-if="cardItem.type=='1'"/>
                      <svg-icon icon-class="wx_icon" v-if="cardItem.type=='2'"/>
                      <svg-icon icon-class="zfb_icon" v-if="cardItem.type=='3'"/>
                      {{ cardItem.bank || `**${cardItem && cardItem.name.slice(-1)}` }}
                      ({{
                        cardItem.cardNo.substring(cardItem.cardNo.length - 4)
                      }})
                    </p>
                    <button @click="removeCardFn(cardItem)">解绑</button>
                  </li>
                </ul>
              </div>

              <!-- ------------------------添加银行卡，支付宝和微信------------------------ -->
              <div class="addBankCard-box" v-if="addBtnShow">
                <el-button
                  round
                  icon="el-icon-plus"
                  class="addBankCard"
                  @click="clickAddBtn(1)">
                  添加银行卡
                </el-button>
                <el-button
                  v-if="wxState"
                  round
                  class="addBankCard"
                  @click="clickAddBtn(2)">
                  <svg-icon icon-class="wx_icon" />
                  添加微信
                </el-button>
                <el-button
                  v-if="zfbState"
                  round
                  class="addBankCard"
                  @click="clickAddBtn(3)">
                  <svg-icon icon-class="zfb_icon" />
                  添加支付宝
                </el-button>
              </div>
              <div class="accountList" v-else>
                <p class="accTitle" v-if="addCardObj.type == 1">新增银行卡</p>
                <p class="accTitle" v-else-if="addCardObj.type == 2">新增微信</p>
                <p class="accTitle" v-else-if="addCardObj.type == 3">新增支付宝</p>
                <el-form
                  class="addBankCardForm"
                  ref="form"
                  :model="addCardObj"
                  :rules="rules"
                  label-width="130px"
                  label-position="left"
                >
                  <el-form-item prop="name" label="姓名">
                    <el-input
                      v-model="addCardObj.name"
                      placeholder="请填写姓名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item prop="bank" label="开户行" v-if="addCardObj.type==1">
                    <el-input
                      v-model="addCardObj.bank"
                      placeholder="请填写开户行"
                    ></el-input>
                  </el-form-item>
                  <el-form-item prop="cardNo" :label="addCardObj.type==1?'银行卡号':'手机号/邮箱'" v-if="addCardObj.type!=2">
                    <el-input
                      v-model="addCardObj.cardNo"
                      :placeholder="addCardObj.type==1?'请填写银行卡号':'请填写手机号/邮箱'"
                    ></el-input>
                  </el-form-item>
                  <!-- <el-form-item prop="phone" label="手机号">
                    <el-input
                      v-model="addCardObj.phone"
                      placeholder="请填写手机号"
                    ></el-input>
                  </el-form-item> -->
                </el-form>
                <div class="addBtnBox">
                  <el-button round @click="cancelAddBtn">取消</el-button>
                  <el-button round @click="comfirmAddCard" class="addBtn">确认添加</el-button>
                </div>
              </div>
              <!-- ------------------------添加银行卡，支付宝和微信------------------------ -->

            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <!-- 我的已购 -->
          <div class="detailBought" v-if="homePageState == 1">
            <!-- // 0推荐内容 1 法律 2 问答 3 头条 4 合同 5 咨询 6项目 7支付页面-->
            <div class="FeaturedContent" v-if="detailBoughtShow == 0">
              <FeaturedContent></FeaturedContent>
            </div>
            <div
              class="project"
              v-else-if="[1, 2, 3].includes(detailBoughtShow)"
            >
              <FourCategories
                :currentDetail="buyDetail.goods"
                :listActive="detailBoughtShow"
              ></FourCategories>
            </div>
            <div class="detail_main_div" v-else-if="detailBoughtShow == 5">
              <DetailBought :buyDetail="buyDetail"></DetailBought>
            </div>
            <div class="project" v-else-if="detailBoughtShow == 6">
              <Project :buyDetail="buyDetail" ref="projectBox"></Project>
            </div>
            <div class="project" v-else-if="detailBoughtShow == 4">
              <ContractDetail
                :contractListinfo="buyDetail.goods"
              ></ContractDetail>
            </div>
            <div class="project" v-else-if="detailBoughtShow == 8">
              <ExamineDetail :auditdata="buyDetail"></ExamineDetail>
            </div>

            <div class="project" v-else-if="detailBoughtShow == 7">
              <Pay
                :project="project"
                :orderinfo="orderinfo"
                :step="step"
                :flow="flow"
              ></Pay>
            </div>
            <!-- // 1 法律 2 问答 3 头条 4 合同 5 咨询 6项目 end-->
          </div>
          <!-- 我的已购 end -->

          <!-- 我的收藏 -->
          <div class="detailPage" v-else-if="homePageState == 2">
            <template v-if="!CollectPayShow">
              <div class="FeaturedContent" v-if="detailPageShow">
                <!-- 推荐页面 -->
                <FeaturedContent></FeaturedContent>
              </div>

              <!-- <DetailPage
                v-show="!detailPageShow"
                :collectDetail="collectDetail"
              ></DetailPage> -->
              <div
                class="project"
                v-else-if="[1, 2, 3].includes(Number(collectDetail.esType))"
              >
                <!-- 法条、政策、解答 -->
                <FourCategories
                  :currentDetail="collectDetail"
                  :listActive="collectDetail.esType"
                ></FourCategories>
              </div>
              <div
                class="detail_main_div"
                v-else-if="collectDetail.esType == 5"
              >
              <!-- 咨询 -->
                <DetailBought :buyDetail="collectDetail"></DetailBought>
              </div>
              <div class="project" v-else-if="collectDetail.esType == 6">
                <!-- 项目 -->
                <Project :buyDetail="collectDetail"></Project>
              </div>
              <div class="project" v-else-if="collectDetail.esType == 4">
                <!-- 合同详情 -->
                <ContractDetail
                  :contractListinfo="collectDetail"
                  :ifPurchase='ifPurchase'
                  @tofather='tofather'
                ></ContractDetail>
              </div>
            </template>
            <!-- 收藏页面的支付 -->
            <CollectPay
              v-else
              :currentDetail="detail"
              :goodsList="goodsList"
              :isEmailOrDown="isEmailOrDown"
              :listActive="listActive"
            ></CollectPay>
          </div>
          <!-- 我的收藏 end-->

          <!-- 资金账户 -->
          <div class="detailOrWithdraw" v-else>
            <DetailOrWithdraw
              ref="DetailOrWithdraw"
              @updateExpertDate="getUserBalanceFn"
              @updateCmDate="getCmBrokerageUserBalanceFn"
              :amount="amount"
              :cardList="cardList"
              :recordState="recordState"
            ></DetailOrWithdraw>
          </div>
          <!-- 资金账户 end-->
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import FeaturedContent from "@/components/FeaturedContent";
import ExamineDetail from "./examineDetail";
import DetailOrWithdraw from "./detailOrWithdraw.vue";
import DetailBought from "./detailBought.vue";
import ContractDetail from "./ContractDetail.vue";
import FourCategories from "@/BMViews/views/userCenter/homepage/fourCategories.vue";
import DetailPage from "./detailPage.vue";
import Project from "./project.vue";
import Pay from "./Pay.vue";
import CollectPay from "@/components/FeaturedContent/Pay.vue";
import NewCard from "@/wss/components/newCard.vue";
import { getServiceFavoritesListApi } from "@/BMViews/api/service/docFavorites.js";
import { getQaInfoApi } from "@/BMViews/api/doc/qa.js";
import { getLawGetInfoApi } from "@/BMViews/api/doc/law.js";
import { getTopInfoApi } from "@/BMViews/api/doc/top.js";
import { getScontractGetInfoApi } from "@/BMViews/api/doc/scontract.js";
import { getConsultGetInfoApi } from "@/BMViews/api/doc/consult.js";
import {
  getbankcardListApi,
  getbankcardRemoveApi,
  getbankcardAddApi,
} from "@/BMViews/api/base/bankcard.js";
import { getServiceRemoveApi } from "@/BMViews/api/service/docFavorites.js";
import { getUserBalanceApi } from "@/BMViews/api/financial/expertBrokerage.js";
import { getCmBrokerageUserBalanceApi } from "@/BMViews/api/financial/cmBrokerage.js";
import { getMobileUserBalanceApi } from "@/BMViews/api/financial/orderCommission.js";

import {
  getOrderListApi,
  getOrderGetInfoApi,
} from "@/BMViews/api/financial/order.js";
import {getscontractifPurchase} from '@/BMViews/api/contract/index'
export default {
  name: "Homepage",
  components: {
    NewCard,
    FeaturedContent,
    ContractDetail,
    DetailBought,
    DetailPage,
    Project,
    DetailOrWithdraw,
    FourCategories,
    Pay,
    CollectPay,
    ExamineDetail,
  },
  data() {
    return {
      addCardObj: {
        bank: "", //  开户行		false
        cardNo: "", //银行卡号		false
        name: "", //名称		false
        phone: "", //	电话		false	}
        type: null,//当前添加银行卡的类型 1银行卡 2微信 3支付宝
      },
      // 添加银行卡规则
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        cardNo: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        bank: [{ required: true, message: "请输入", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },

      // 银行卡数组
      cardList: [],
      amount: 0,//可提现的余额
      auditBalance: 0,//正在提现中(审核中)的金额
      hotLabelMove: true, //热门标签按钮显示隐藏

      // 收藏详细
      collectDetail: {},
      ifPurchase:'',//是否为已购买

      // 收藏列表
      collectList: [],
      // 订单详细
      buyDetail: {},
      // 我的已购参数
      orderParam: {
        userId: this.$store.getters.userId,
        userType: 1,
        // status: 2,
      },
      // 流水账列表
      accountList: [],
      homePageState: 1, // 1我的已购 2我的收藏 3资金账户
      detailBoughtShow: 0, // 0推荐内容 1 法律 2 问答 3 头条 4 合同 5 咨询 6项目 7支付
      detailPageShow: true, //是否默认显示推荐

      CollectPayShow: false, //当前收藏的支付页是否显示 true显示 false不显示
      detail: {}, //收藏的文章数据
      goodsList: {}, //收藏的订单数据
      isEmailOrDown: false, //收藏的当前点击的是电邮还是下载文档
      listActive: "", //收藏的当前的esType

      // 1 法律 2 问答 3 头条 4 合同 5 咨询 6项目
      buyList: [],

      addBtnShow: true, //点击添加银行卡之后的显示隐藏
      wxState: true,//微信是否显示
      zfbState: true,//支付宝是否显示

      recordState: true, //当前是 true资金明细 还是 false账户提现
      // // 流水账参数
      // accountObj: {
      //   bank: null, // 银行	query	false
      //   cardNo: null, // 银行卡号	query	false
      //   cmId: null, // 商务id	query	false
      //   userType: null,
      //   createTime: null, // 创建时间	query	false
      //   orderId: null, // 1为用户调用	query	false
      //   status: null, // 状态	query	false
      //   type: null, // 类型	query	false
      // },
      activeId: null, // 当前点击文章的id

      // 需要传给项目支付的几个参数
      project: {}, //项目信息
      orderinfo: {}, //订单信息
      step: [], //步骤数据
      flow: "", //步骤id
    };
  },
  // 离开路由的钩子
  beforeRouteLeave(to, from, next) {
    if (this.$refs.detailPage) {
      this.$refs.detailPage.getArticleTime(); // 计算在文章内停留的时间
    }
    next();
  },
  computed: {
    test() {
      return (userType) => {
        console.log(userType);
      };
    },
    getType() {
      return (type) => {
        // 1 法律 2 问答 3 头条 4 合同 5 咨询
        if (type == 1) {
          return "法条";
        } else if (type == 2) {
          return "解答";
        } else if (type == 3) {
          return "政策";
        } else if (type == 4) {
          return "合同";
        } else if (type == 5) {
          return "咨询";
        } else if (type == 6) {
          return "项目";
        } else if (type == 20) {
          return "合同智审";
        } else if (type == 21) {
          return "诉讼模拟";
        } else if (type == 22) {
          return "阿米巴预算";
        } else if (type == 23) {
          return "文控中心";
        }
      };
    },
  },
  watch: {
    homePageState(newVal, oldVal) {
      if (newVal == 2) {
        // this.detailPageShow = false;
      } else if (newVal == 3) {
      }
      // console.log(newVal);
    },
  },
    beforeDestroy() {
    // 销毁
    this.$bus.$off("handlerPay");
    this.$bus.$off("returnBtnShow");
    this.$bus.$off("handlerPaySuccee");
    this.$bus.$off("refreshQuestion");
    this.$bus.$off("handlerShow");
    this.$bus.$off("collectHandlerShow");
    this.$bus.$off("EventPaymentCompletion");
    this.$bus.$off("getAvaBalance");
    },
  mounted() {
    this.getbankcardListFn();
    this.getMobileUserBalance() //查询可提现金额

    if(this.$route.query.homePageState){
      this.homePageState = this.$route.query.homePageState
    }

    //通过$bus跳转支付页面  this.project, this.orderinfo, this.step, flowId
    this.$bus.$on("handlerPay", (num, project, orderinfo, step, flow) => {
      this.detailBoughtShow = num;
      this.project = project; //项目信息
      this.orderinfo = orderinfo; //订单信息
      this.step = step; //步骤数据
      this.flow = flow; //步骤id
    });

    // 返回
    this.$bus.$on("returnBtnShow", (num) => {
      this.detailBoughtShow = num;
      this.detailPageShow = true;
    });

    // 支付成功后的回调
    this.$bus.$on("handlerPaySuccee", (num) => {
      this.detailBoughtShow = num;
      // 支付成功后要项目显示流程状态
      this.$nextTick(() => {
        this.$refs.projectBox.clickStatus();
      });
    });

    // 追问完成后刷新数据
    this.$bus.$on("refreshQuestion", (item) => {
      this.clickDetailBought(item);
    });

    this.positionType = this.$store.getters.userType;
    this.getOrderListFn();
    this.getServiceFavoritesListFn();

    // 判断是否是专家类型
    if (this.positionType == 50) {
      // this.getUserBalanceFn(); //获取专家的金额
      // 判断是否是商务类型
    } else if (
      this.positionType == 60 ||
      this.positionType == 65 ||
      this.positionType == 69
    ) {
      // this.getCmBrokerageUserBalanceFn(); //获取商务的金额
    }

    if (
      this.positionType == 50 ||
      this.positionType == 60 ||
      this.positionType == 65 ||
      this.positionType == 69
    ) {
      this.getbankcardListFn();
    }

    //收藏的 通过$bus 子组件修改当前显示的
    this.$bus.$on("handlerShow", (num, detail, goodsList, isEmailOrDown) => {
      this.detail = detail;
      this.goodsList = goodsList;
      this.isEmailOrDown = isEmailOrDown;
      this.listActive = this.collectDetail.esType;

      this.CollectPayShow = true; //显示收藏支付页
    });
    //收藏的 问圈支付成功
    this.$bus.$on("collectHandlerShow", () => {
      this.CollectPayShow = false; //显示收藏的文章详情
    });
    //收藏的 二维码支付成功
    this.$bus.$on("EventPaymentCompletion", () => {
      this.CollectPayShow = false; //显示收藏的文章详情
    });

    //$bus 重新查询可提现余额
    this.$bus.$on("getAvaBalance", () => {
      this.getMobileUserBalance() //查询可提现金额
    });
  },
  methods: {
    // 判断当前用户可否可以查看资金账户
    getRoleZj(){
      let roles = this.$store.state.user.roles
      if(roles.includes('swzy')||roles.includes('qdzy')||roles.includes('xmzj')||roles.includes('zxzj')||roles.includes('stbbskr')||roles.includes('styyzj')){
        return true
      }else{
        return false
      }
    },

    // 查询可提现金额
    async getMobileUserBalance(){
      let result = await getMobileUserBalanceApi()
      if(result.code==200){
        this.amount = result.data.sumBalance //可提现
        this.auditBalance = result.data.auditBalance //审核中的金额
      }
    },
    
    // 点击我的收藏
    clickCollect() {
      this.homePageState = 2;
      this.getServiceFavoritesListFn();
    },

    // 获取商务的金额
    async getCmBrokerageUserBalanceFn() {
      let { code, data } = await getCmBrokerageUserBalanceApi({
        userType: 1,
      });
      if (code != 200) return;
      // this.amount = data.amount;
    },

    // 点击银行卡
    clickBankCard(item, { target }) {
      if (target.nodeName == "BUTTON") return;
    },

    // 确认添加银行卡
    async comfirmAddCard() {
      try {
        await this.$refs.form.validate();
        let { code, msg } = await getbankcardAddApi(this.addCardObj);
        if (code != 200) return;
        this.$message({
          type: "success",
          message: msg,
        });
        this.getbankcardListFn();
        this.addBtnShow = true;
        this.addCardObj = {};
        await this.$refs.form.resetFields();
      } catch (error) {}
    },
    // 解绑银行卡
    async removeCardFn(item) {
      await this.$confirm("该操作将解绑此卡, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      let { code, msg } = await getbankcardRemoveApi([item.id]);

      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });

      this.getbankcardListFn();
    },
    // 获取银行卡
    async getbankcardListFn() {
      let { code, rows } = await getbankcardListApi({
        userId: this.$store.getters.userId,
      });
      if (code != 200) return;
      this.cardList = JSON.parse(JSON.stringify(rows));
      // console.log(this.cardList[0]);
      this.$refs?.DetailOrWithdraw?.setWithdrawList(rows);
      // console.log(this.$refs);

      // 判断微信支付宝是否显示-------------
      let wxArr = []
      let zfbArr = []
      this.cardList.forEach(item=>{
        if(item.type=='2') wxArr.push(item.type)
        if(item.type=='3') zfbArr.push(item.type)
      })
      if(wxArr.length){
        this.wxState = false
      }else{
        this.wxState = true
      }
      if(zfbArr.length){
        this.zfbState = false
      }else{
        this.zfbState = true
      }
      // 判断微信支付宝是否显示------------- end
    },

    // 获取账户金额
    async getUserBalanceFn() {
      let { code, data } = await getUserBalanceApi();
      if (code != 200) return;
      console.log(data);
      // this.amount = data.amount;
    },

    async removeCollect(item) {
      let { code, msg } = await getServiceRemoveApi({
        esId: item.esId,
      });
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
      // 重新获取收藏
      this.getServiceFavoritesListFn();
    },
    async getServiceFavoritesListFn() {
      let { code, rows } = await getServiceFavoritesListApi();
      console.log(rows,'rows收藏列表');
      if (code != 200) return;
      this.collectList = JSON.parse(JSON.stringify(rows));

      // console.log(res);
    },
    // 获取订单列表接口
    async getOrderListFn() {
      console.log(this.orderParam);
      let { code, rows } = await getOrderListApi(this.orderParam);

      if (code != 200) return;
      let arr = rows.filter((item) => {
        if (
          item.status == "0" ||
          item.status == "2" ||
          item.status == "3" ||
          (item.type == "6" && item.expertId)
        ) {
          return item;
        }
      });
      // 过滤掉问金转让的
      let newarr = arr.filter((item) => {
        if (item.type != "14") {
          return item;
        }
      });
      this.buyList = JSON.parse(JSON.stringify(newarr));
    },

    //点击我的已购文章列表
    async clickDetailBought(list) {
      console.log(list,'断电kkkkkkkkkkkkkkkkkk');
      if(list.type == '23'){
        //文控
        this.$router.push({ path: `/Bm-contract/IntelligentControl` });
      }else if(list.type == '22'){
        //预算
        this.$router.push({ path: `/Bm-tool/budget` });
      }
      // 查询es数据
      let { code, data } = await getOrderGetInfoApi({ id: list.id });
      if (code != 200) return;

      this.buyDetail = JSON.parse(JSON.stringify(data));

      // 0推荐内容 1 法律 2 问答 3 头条 4 合同 5 咨询 6项目 7支付
      if ([1, 2, 3].includes(Number(list.type))) {
        this.detailBoughtShow = Number(list.type);
      } else if (list.type == "4") {
        this.detailBoughtShow = 4;
      } else if (list.type == "5") {
        this.detailBoughtShow = 5;
      } else if (list.type == "6") {
        this.detailBoughtShow = 6;
      } else if (list.type == "7") {
        this.detailBoughtShow = 7;
      } else if (list.type == "20") {
        this.detailBoughtShow = 8;
      }
    },

    //点击我的收藏文章列表
    async clickDetailPage(item) {
      this.detailPageShow = false;
      this.CollectPayShow=false;//关闭收藏支付
      // 1 法律 2 问答 3 头条 4 合同 5 咨询
      // 0推荐内容 1 法律 2 问答 3 头条 4 合同 5 咨询 6项目 7支付
      let result = null;

      switch (Number(item.esType)) {
        case 1:
          result = await getLawGetInfoApi({
            id: item.esId,
          });
          break;
        case 2:
          result = await getQaInfoApi({
            id: item.esId,
          });
          break;
        case 2:
          break;
        case 3:
          result = await getTopInfoApi({
            id: item.esId,
          });
          break;
        case 4:
          result = await getScontractGetInfoApi({
            id: item.esId,
          });
           this.getscontractifPurchasefn(item,true)//获取是否购买的接口
          break;
        case 5:
          result = await getConsultGetInfoApi({
            id: item.esId,
          });
          break;
      }

      // 没有拿到数据 collectDetail = {}
      if (!result) return (this.collectDetail = {});
      // 不等于200直接退出
      if ((result.code = !200)) return;
      this.collectDetail = JSON.parse(JSON.stringify(result.data || {}));
      this.collectDetail.esType = item.esType;
    },
    // 是否已购买的接口
     async getscontractifPurchasefn(item,e) {
      console.log(item,'该条收藏');
      let params = {
        esId: item.esId||item.id,
        type: "4",
      };
      if(e){
        params.queryPurchase='1'
      }
      let data = await getscontractifPurchase(params);
      console.log(data,'是否已购买');
      if (data.code == 200) {
        this.ifPurchase=data.ifPurchase
        if(!e){
        // 将订单数据传给支付页面
        this.goodsList=data
        }
 
      }
     },

    // 收藏详情点击了购买
    tofather(item){
      console.log('需要购买的',item);
      this.CollectPayShow=true
      // 
      this.getscontractifPurchasefn(item,false)
    },

    //点击查看明细的回调
    isDetail() {
      this.recordState = true;
    },
    //点击账户提现的回调
    isWithdraw() {
      this.recordState = false;
      this.addBtnShow = true;
    },
    // 点击添加银行卡的回调
    clickAddBtn(num) {
      this.addCardObj.type = num
      this.addBtnShow = false;
    },
    //点击取消添加银行卡的回调
    cancelAddBtn() {
      this.addCardObj.type = null
      this.addBtnShow = true;
      this.addCardObj = {
        bank: "", //  开户行		false
        cardNo: "", //银行卡号		false
        name: "", //名称		false
        phone: "", //	电话		false	}
        type: null,//当前添加银行卡的类型 1银行卡 2微信 3支付宝
      }
    },

    // 隐藏支付宝微信账户
    getCardNum(cardNo){
      if(cardNo.includes('@')){
        // 邮箱
        let arr = cardNo.split('@')
        let two = cardNo.slice(0,2)
        return two + '*****@' + arr[1]
      }else{
        // 手机号
        let three = cardNo.slice(0,3)
        let two = cardNo.slice(9,11)
        return three + '******' + two
      }
    },

    //获取第一个汉字
    getHanzi(name) {
      if (name) {
        let arr = name.split("");
        let reg =
          /^(\d+$|[a-z]+$|[A-Z]+$|[` ~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$|((?=[!-~])[^\da-zA-Z])+$)/;
        let str = "";
        for (let i = 0; i < arr.length; i++) {
          if (!reg.test(arr[i])) {
            return arr[i];
          }
        }
      }
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .detail_main_div,
::v-deep .label-box-content .project,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .label-box-content .el-card__body {
  position: relative;
  padding: 0 0 30px 0;
}
::v-deep .label-box-content .el-card__body > .top {
  margin: 0 30px;
}
::v-deep .label-box-content .el-card__body > div {
  height: calc(100% - 45px);
  overflow-y: auto;
}
.FeaturedContent {
  height: 100%;
}
::v-deep .FeaturedContent .el-card__body > div {
  /* padding: 0 30px; */
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

/* 推荐页的顶部 */
::v-deep .detailBought > .pdtNo,
::v-deep .detailPage > .pdtNo {
  height: 100%;
}
::v-deep .detailBought > .pdtNo .el-card__body,
::v-deep .detailPage > .pdtNo .el-card__body {
  padding-top: 0;
}
::v-deep .detailBought .el-card__body > .top,
::v-deep .detailPage .el-card__body > .top {
  margin: 0;
}

::v-deep .detailBought .project .el-card__body > .top {
  display: none;
}

/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
  margin-left: 30px;
  margin-right: 30px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6a769f;
  border-color: #6a769f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 暂无数据样式 */
.forData {
  text-align: center;
  font-size: 14px;
  color: #ccc;
  margin: 30px 0;
}

/* 已购收藏列表 */
.orderList ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 10px;
}
.orderList ul > li {
  position: relative;
  padding: 30px;
  border-bottom: 1px solid #efefef;
  cursor: pointer;
}
.orderList ul > li:hover,
.orderList ul > li.isActive {
  background-color: #f4f5f8;
}
.orderList ul > li > i {
  position: absolute;
  left: 30px;
  top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 30px;
  height: 30px;
  background-color: #38476d;
  border-radius: 4px;
  color: #fff;
  font-style: normal;
}
.orderList ul > li:nth-child(even) > i {
  background-color: #b1bedf;
}
.orderList ul > li > h2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 16px;
  color: #333;
  margin: 0;
  padding-bottom: 12px;
}
.orderList ul > li > h2 > p {
  width: 100%;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
.orderList ul > li > h2 > span {
  width: 25%;
  text-align: right;
  color: #f87a23;
  font-size: 12px;
}

.orderList ul > li .coll_des {
  width: 100%;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.orderList ul > li .coll_source {
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 18px;
  font-size: 12px;
  color: #bbb;
}
.orderList ul > li .coll_source > button {
  display: none;
  margin-left: auto;
  background-color: transparent;
  border: 0;
  color: #f87a23;
  font-size: 12px;
  cursor: pointer;
}
.orderList ul > li .coll_source > span {
  padding: 4px 12px;
  color: #666;
  background-color: #f4f5f8;
  border-radius: 14px;
  margin-right: 12px;
}
.orderList ul > li.isActive .coll_source > span {
  background-color: #e4e5e7;
}
.orderList ul > li:hover .coll_source > span {
  background-color: #e4e5e7;
}
.orderList ul > li:hover .coll_source > button {
  display: block;
}

/* 详情 */
::v-deep .detailBought .el-card__body,
::v-deep .detailPage .el-card__body {
  padding: 0px 30px;
}

/* 资金账户 */
.account {
  padding: 40px 30px;
}
.account .accountList {
  margin-bottom: 40px;
}
.account .accTitle {
  font-size: 12px;
  color: #999;
  margin-bottom: 20px;
}
.cashAmount {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cashAmount p {
  color: #39486f;
  font-size: 30px;
}
.cashAmount p>span{
  color: #999;
  font-size: 13px;
  vertical-align: middle;
}
.cashAmount .el-button {
  border-color: #f87a23;
  color: #f87a23;
  font-size: 14px;
}
.cashAmount .el-button.cashIsFocus,
.cashAmount .el-button:hover {
  background-color: #f87a23;
  color: #fff;
}
.bankCard li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #efefef;
  border-radius: 8px;
  padding: 12px 16px;
  color: #333;
  font-size: 16px;
  margin-bottom: 14px;
}
.bankCard {
  /* overflow-y: scroll;
  height: 400px; */
}
.bankCard li > p {
  display: flex;
  align-items: center;
}
.bankCard li svg {
  font-size: 26px;
  margin-right: 12px;
}
.bankCard li button {
  border: 0;
  background-color: transparent;
  font-size: 12px;
  color: #999;
}

.addBankCard-box{
  display: flex;
}
.addBankCard {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 0;
  border: 1px solid #d7d7d7;
  border-radius: 30px;
}
.addBankCard svg{
  font-size: 18px;
  margin-right: 5px;
}
.addBankCard >>> i {
}
.addBankCard:hover {
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
}
::v-deep .addBankCardForm .el-form-item__label {
}
::v-deep .addBankCardForm .el-form-item__label::before {
  display: none;
}
.addBtnBox {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 20px 30px;
  border-top: 1px solid #ecedf0;
  background-color: #fff;
}
.addBtnBox .el-button {
  padding: 0;
  width: 110px;
  padding: 10px 0;
  color: #999;
}
.addBtnBox .el-button.addBtn {
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
}
.addBtnBox .el-button:hover {
  border-color: #f87a23;
  color: #f87a23;
  background-color: transparent;
}
.addBtnBox .el-button.addBtn:hover {
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
  opacity: 0.9;
}
</style>
